<template>
<el-card class="box">
  <el-row :gutter="20" type="flex">
    <!-- <el-col :span="4">
      <img src="~@/assets/logo.png" class="c"/>
      <span class='e'>违纪名单</span>
    </el-col> -->
    <el-col :span="8">
      <el-form :model="honorData" label-width="80px">
        <el-form-item label="职位">
          <el-select v-model="honorData.depart" placeholder="请选择活动区域" @change="aa">
            <el-option label="销售部" value="销售部"></el-option>
            <el-option label="研发部" value="研发部"></el-option>
            <el-option label="设计部" value="设计部"></el-option>
            <el-option label="所有" value="所有"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="8">
      <el-form :model="honorData" label-width="80px">
        <el-form-item label="员工名字">
          <el-input v-model="honorData.name"></el-input>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="5">
      <el-button type="primary" class="a" @click="suc">查询</el-button>
    </el-col>
  </el-row>
  <el-row :gutter="25">
    <el-col :span="6" v-for="item in talents" :key="item.id" class="image">
      <div v-if="show==='A'">
        <div v-if="item.depart===honorData.depart || honorData.depart==='所有'">
          <el-card :body-style="{ padding: '0px' }">
            <img @click="turn" :src="item.image" class="d" />
            <div style="padding: 14px;">
              <span>{{item.name}}</span>
            </div>
          </el-card>
        </div>
      </div>
      <div v-else-if="show==='B' && item.name===temp && (item.depart===honorData.depart || honorData.depart==='所有')">
        <el-card :body-style="{ padding: '0px' }">
          <img @click="turn" :src="item.image" class="d" />
          <div style="padding: 14px;">
            <span>{{item.name}}</span>
          </div>
        </el-card>
      </div>
      <div v-else :show='C'></div>
    </el-col>
  </el-row>
</el-card>
</template>

<script>
export default {
  data () {
    return {
      show: 'A',
      temp: '',
      honorData: 
      {
        depart: '所有',
        name: ''
      },
      talents: [
        {
          id: '1',
          name: 'a dog',
          depart: '销售部',
          image: require('../../assets/dog.jpg')
        },
        {
          id: '2',
          name: 'a monkey',
          depart: '研发部',
          image: require('../../assets/monkey.jpg')
        },
        {
          id: '3',
          name: 'a cat',
          depart: '设计部',
          image: require('../../assets/cat.jpg')
        },
        {
          id: '4',
          name: 'twodogs',
          depart: '销售部',
          image: require('../../assets/twodogs.jpg')
        },
        {
          id: '5',
          name: '研发部twodogs',
          depart: '研发部',
          image: require('../../assets/twodogs.jpg')
        },
        {
          id: '6',
          name: '1',
          depart: '销售部',
          image: require('../../assets/twodogs.jpg')
        },
        {
          id: '7',
          name: '2',
          depart: '设计部',
          image: require('../../assets/twodogs.jpg')
        },
        {
          id: '8',
          name: '6',
          depart: '研发部',
          image: require('../../assets/twodogs.jpg')
        },
        {
          id: '9',
          name: '8',
          depart: '销售部',
          image: require('../../assets/twodogs.jpg')
        },
        {
          id: '10',
          name: '9',
          depart: '设计部',
          image: require('../../assets/twodogs.jpg')
        },
        {
          id: '11',
          name: '7',
          depart: '研发部',
          image: require('../../assets/twodogs.jpg')
        },
        {
          id: '12',
          name: '12',
          depart: '销售部',
          image: require('../../assets/twodogs.jpg')
        },
        {
          id: '13',
          name: '45',
          depart: '研发部',
          image: require('../../assets/twodogs.jpg')
        }
      ]
    }
  },
  methods: {
    turn() {
      this.$router.push('/punishInfor')
    },
    suc() {
      this.show='B';
      this.temp=this.honorData.name;
      if(this.show==='C'){
        this.$message({
          showclose: 'true',
          message: '查询失败',
          type: 'error'
        })
      }else{
        this.$message({
          showclose: 'true',
          message: '查询成功',
          type: 'success'
        })
      }
    },
    aa() {
      this.show='A';
      this.temp='';
      this.honorData.name='';
    }
  }
}
</script>

<style lang="less" scoped>
.el-row {
  margin-top: 10px;
}
.el-form-item {
  width: 300px;
}
.el-card {
  height: 200px;
  width: 150px;
}
.image {
  display: inline-flex;
  justify-content: center;
}
.box {
  height: 100%;
  width: 100%;
  background-color: #FFFFFF;
  display: inline-block;
  border-width: 2px;
}
.a {
  width: 80px;
  color: #000000;
  background-color: #FFFFFF;
  border-color: #000000;
}
.b {
  width: 300px;
}
.c {
  height: 50px;
  width: 50px;
}
.d {
  height: 150px;
  width: 150px;
}
.e {
  font-size: 25px;
  justify-content: center;
}
</style>
